<template>
  <div class="layout">
    <Layout>
      <Layout>
        <Header :style="{padding: 0,margin: '20px'}" class="layout-header-bar">
          <Row>
            <Col span="2" style="text-align: right">任务编号：</Col>
            <Col span="4" style="text-align: center">
              <Input v-model="work.id" placeholder="请输入任务编号" style="width: 220px" />
            </Col>
            <Col span="2" style="text-align: right">司机名称：</Col>
            <Col span="4" style="text-align: center">
              <Input v-model="work.name" placeholder="请输入司机名称" style="width: 220px" />
            </Col>
            <Col span="2" style="text-align: right">任务状态：</Col>
            <Col span="5" style="text-align: center">
              <Select v-model="work.status" style="width: 220px">
                <Option value="1" label="待发车"></Option>
                <Option value="2" label="在途"></Option>
                <Option value="3" label="已到达"></Option>
              </Select>
            </Col>
            <Col span="5" style="text-align: center">
              <Button type="error" icon="ios-search"  @click="queryTaskTransportInfo" >查询</Button>
              <Button style="margin:  0 0 0 10px" @click="clearCondition" icon="md-refresh" >重置</Button>
            </Col>
          </Row>
        </Header>
        <Content :style="{margin: '20px', padding: '20px' ,background: '#fff', minHeight: '520px'}">
            <Table  width="550" border :columns="columns" style="width: 100%" :data="pageInfo.list">
            </Table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="work.currentPage"
              :page-sizes="[3 ,5 ,7]"
              :page-size="work.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
              style="text-align: center">
            </el-pagination>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      work:{
        currentPage : 1,
        pageSize: 3
      },

      columns:[
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 80
        },
        {
          title: '运输任务编号',
          key: 'id',
          width: 130
        },
        {
          title: '车牌号',
          key: 'licensePlate',
          width: 130
        },
        {
          title: '调度机构',
          key: 'cname',
          width: 150
        },
        {
          title: '起始地',
          key: 'startAgencyName',
          width: 150
        },
        {
          title: '目的地',
          key: 'endAgencyName',
          width: 150
        },
        {
          title: '司机',
          key: 'name',
          width: 100
        },
        {
          title: '运输任务状态',
          key: 'status',
          width: 140,
        },
        {
          title: '车辆装载状态',
          key: 'loadingStatus',
          width: 140
        },
        {
          title: '计划提货时间',
          key: 'planPickUpGoodsTime',
          width: 140
        },
        {
          title: '实际提货时间',
          key: 'actualPickUpGoodsTime',
          width: 140
        },
        {
          title: '计划发车时间',
          key: 'planDepartureTime',
          width: 140
        },
        {
          title: '实际发车时间',
          key: 'actualDepartureTime',
          width: 140
        },
        {
          title: '操作',
          fixed: 'right',
          align: 'center',
          width: 160,
          render: (h , params) => {
            return h('div',[
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small',
                  to: {path:"/sp-logistics/sp-transport-info/sp-transport-info-1",query:{id: params.row.id}}
                }
              }, "查看运输任务详情")
            ])
          }
        },
      ],
      pageInfo:{}
    }
  },
  created(){
    // console.log(this.statusTextMap[1]);
     this.queryTaskTransportInfo();
  },
  methods:{
    // 清空条件框
    clearCondition(){
      this.work = {
        currentPage : 1,
        pageSize: 3
      };
    },
    // 查询运输任务单信息
    queryTaskTransportInfo: async function(){
        var rsp = await axios.post("/api/pd-workyc/pd-task-transport/queryTaskTransportInfo",this.work);
        // console.log(rsp.data);
        this.pageInfo = rsp.data;
        this.pageInfo.list.forEach((e)=>{
            if (e.status==1){
              e.status = '未装车';
            }else if(e.status==2){
              e.status = '在途';
            }else{
              e.status = '已到达';
            }
            if(e.loadingStatus==1){
              e.loadingStatus = '半载';
            }else if(e.loadingStatus==2){
              e.loadingStatus = '满载';
            }else{
              e.loadingStatus = '空载';
            }
        })
    },

    // 调整页面大小
    handleSizeChange(val) {
      this.work.pageSize = val;
      this.queryTaskTransportInfo();
    },

    // 翻页
    handleCurrentChange(val) {
      this.work.currentPage = val;
      this.queryTaskTransportInfo();
    },


  }
}

</script>

<style scoped>

.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-header-bar{
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
</style>
